<template>
  <div>
    <div class="product">
      <div class="product-top">
        <div class="left">
          <el-button size="small" @click="toAdd" type="primary" v-show="permission.product_company_add">+添加新产品
          </el-button>
          <el-button size="small" @click="$refs.dialogImport.init()" v-show="permission.product_company_import">产品导入
          </el-button>
          <a href="javascript:void(0)" v-show="permission.product_company_release">
            <el-button size="small" @click="putIntel(true)" v-show="currentNav==0">批量上架</el-button>
            <el-button size="small" @click="putIntel(false)" v-show="currentNav==1">批量下架</el-button>
          </a>
          <el-button size="small" @click="deleteRow" v-show="permission.product_company_delete">批量删除</el-button>
        </div>
        <b class="search-roll" v-show="permission.product_company_add||permission.product_company_import
            ||permission.product_company_release||permission.product_company_delete">
          <input type="text" placeholder="输入商品名称搜索相关商品" class="search" v-model="searchVal"
                 @keyup.enter="search">
          <i class="el-icon-search" @click="search"></i>
        </b>
      </div>
      <!-- 产品列表-->
      <ProductList ref="productList" :currentNav="currentNav"
                   @showDrawer="showDrawer" @emptySearch="searchVal=''">
        <template slot="topMenu">
          <ul class="top-nav">
            <li v-for="item,index in topNav" :key="index"
                :class="{active:currentNav==item.type}" @click="toggleNav(item.type)">{{item.name}}
            </li>
            <b v-show="!permission.product_company_add&&!permission.product_company_import
            &&!permission.product_company_release&&!permission.product_company_delete"
               class="search-roll" style="position: absolute;right: 0;">
              <input type="text" placeholder="输入商品名称搜索相关商品" class="search" v-model="searchVal"
                     @keyup.enter="search">
              <i class="el-icon-search" @click="search"></i>
            </b>
          </ul>
        </template>
      </ProductList>
    </div>
    <DialogImport ref="dialogImport"></DialogImport>
  </div>
</template>

<script>
    import {mapGetters, mapState} from "vuex";
    import ProductList from '@/components/product/List'
    import DialogImport from '@/components/product/DialogImport'
    import {verification} from '@/util/util'

    export default {
        components: {
            ProductList, DialogImport
        },
        data() {
            return {
                loading: false,
                topNav: [{name: '全部', type: -1}, {name: '出售中', type: 1}, {name: '仓库中', type: 0}],
                dialogVisible: false,
                productList: [],
                searchVal: '',
                currentNav: -1,
                id: ''
            }
        },
        computed: {
            ...mapState(['common']),
            ...mapGetters(["permission"]),
        },
        mounted() {
            this.currentNav = this.common.productFrag;
            this.bus.$on('resetNav', () => {
                this.currentNav = -1;
                this.$store.commit('SET_PRODUCTFRAG',this.currentNav)
            })
        },
        methods: {
            //切换导航
            toggleNav(type) {
                this.$store.commit('SET_PRODUCTFRAG',type)
                this.$store.commit('SET_COMMONPAGE', {page: 1, pageSize: 20});
                this.currentNav = type;
            },
            //发布到官网
            putIntel(state) {
                this.$refs.productList.putIntel(state)
            },
            showDrawer() { // 展示右侧产品详情
                this.dialogVisible = true;
            },
            search() {//搜索
                this.loading = true;
                if (verification(this.searchVal)) {
                    this.$message({
                        message: '请勿输入特殊字符',
                        type: 'success'
                    });
                    return;
                }
                this.$refs.productList.init({currentPage: 1, searchVal: this.searchVal})
            },
            deleteRow() {//删除
                this.$refs.productList.remove(this.currentNav == 1)
            },
            toAdd() { // 添加新产品
                this.$router.push({
                    path: '/product/add',
                    query: {
                        type: 0
                    }
                })
            },
            toDetails(form) { // 跳转到编辑详情
                this.$router.push({path: `/product/details/${form.id}`})
            }
        },
        beforeDestroy() {
            this.bus.$off('resetNav');
        }
    }
</script>

<style lang="scss" scoped>
@import "@/styles/product.scss";

</style>

